<template>
  <div class="dashboard-container">
    <el-form ref="form"
             size="small"
             :model="form"
             :rules="formRules"
             label-width="100px"
             class="t-left">
      <el-form-item label="编辑器:">
        <vue-editor v-model="form.content"
                    use-custom-image-handler
                    @image-added="handleImageAdded"/>
        <!--        <quill-editor ref="myQuillEditor"-->
        <!--                      v-model="form.content"-->
        <!--                      :options="editorOption"-->
        <!--                      @blur="onEditorBlur($event)"-->
        <!--                      @focus="onEditorFocus($event)"-->
        <!--                      @change="onEditorChange($event)"/>-->
      </el-form-item>
      <el-form-item label="上传图片:">
        <custom-el-upload v-model="form.imgUrls"/>
      </el-form-item>
      <el-form-item label="上传图片:">
        <el-button @click="onClick">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { VueEditor } from 'vue2-editor'
// import adminDashboard from './admin'
// import editorDashboard from './editor'
import CustomElUpload from '@/components/CustomElUpload'

export default {
  name: 'Dashboard',
  components: {
    CustomElUpload,
    VueEditor
  },
  data() {
    return {
      currentRole: 'adminDashboard',
      form: { imgUrls: ['http://oss.cd1s1.com/FtmX4cN-3AWth9A2A-Mq1JXuLPzh'] },
      formRules: {},
      dialogPreviewVisible: false,
      dialogPreviewImageUrl: '',
      editorOption: {}
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    // if (!this.roles.includes('admin')) {
    //   this.currentRole = 'editorDashboard'
    // }
  },
  methods: {
    onClick() {
      console.log(this.form)
    },
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      // var formData = new FormData()
      // formData.append('image', file)
      //
      // axios({
      //   url: 'https://fakeapi.yoursite.com/images',
      //   method: 'POST',
      //   data: formData
      // })
      //   .then(result => {
      //     let url = result.data.url // Get url from response
      Editor.insertEmbed(cursorLocation, 'image', this.form.imgUrls[0])
      resetUploader()
      // })
      // .catch(err => {
      //   console.log(err)
      // })
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .el-progress-circle {
    width: 30px !important;
    height: 30px !important;
  }

  /deep/ .el-progress__text {
    top: 150%;
  }
</style>
